import React, { Component } from "react";
import "./admin.scss";
import { Layout } from "antd";
import SiderBar from "../../components/siderBar";
import Main from "../../components/main";
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons";

const { Header, Sider, Content } = Layout;

export default class Admin extends Component {
  state = {
    collapsed: true,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  render() {
    return (
      <Layout className="admin">
        <Sider
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
          className="sider"
        >
          <SiderBar />
        </Sider>
        <Layout className="content">
          <Header className="site-layout-background" style={{ padding: 0 }}>
            {React.createElement(
              this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: "trigger",
                onClick: this.toggle,
              }
            )}
          </Header>
          <Content
            className="site-layout-background"
            style={{
              margin: "24px 16px",
              padding: 24,
              minHeight: 280,
            }}
          >
            <Main />
          </Content>
        </Layout>
      </Layout>
    );
  }
}
